<template>
  <div :class="prefixCls">
    <Button @click="handleOpen()" type="primary"> 新增 </Button>
  </div>
</template>

<script lang="ts" setup name="PortalDesign">
  import { ref, unref, onMounted, onUnmounted } from 'vue';
  import { Button } from 'ant-design-vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useRouter } from 'vue-router';
  import { getToken } from '/@/utils/auth';
  import { useEventListener } from '/@/hooks/event/useEventListener';
  import { useDomain } from '/@/locales/useDomain';
  import QueryString from 'qs';

  const { prefixCls } = useDesign('portal-design');
  const { currentRoute } = useRouter();
  const route = unref(currentRoute);
  const removeEventFn = ref();
  const messageFn = function (e: Indexable = {}) {
    const { close } = e.data || {};
    if (close) {
      console.log(
        '%cpostMessage===>22： ',
        'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
        e,
      );
    }
  };

  const { getTenantId, getDomain } = useDomain();
  const handleOpen = async () => {
    const moduleId = route.meta.moduleId;

    const url =
      'http://localhost:3101/#/home' +
      QueryString.stringify(
        { moduleId, token: getToken(), tenantId: getTenantId.value, domain: getDomain.value },
        { addQueryPrefix: true },
      );
    window.open(url, 'portal-design');

    const { removeEvent } = useEventListener({
      el: window,
      name: 'message',
      listener: messageFn,
    });
    removeEventFn.value = removeEvent;
  };
  onMounted(() => {});
  onUnmounted(() => {
    removeEventFn.value && removeEventFn.value();
    removeEventFn.value = null;
  });
</script>
<style lang="less" scoped></style>
